<template>
  <div class="dialog-container">
    <el-dialog
      title="消息记录"
      :visible="messageDialogVisible"
      append-to-body
      width="70%"
      @open="initData"
      @close="closeDialog"
    >
      <div class="page-container">
        <div class="control-container">
          <div class="right-panel">
            <div class="search-panel">
              <el-form :inline="true" label-width="100">
                <el-form-item label="开始时间">
                  <el-date-picker
                    v-model="query.startTime"
                    type="date"
                    placeholder="请选择开始时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  />
                </el-form-item>
                <el-form-item label="结束时间">
                  <el-date-picker
                    v-model="query.endTime"
                    type="date"
                    placeholder="请选择结束时间"
                    value-format="yyyy-MM-dd 23:59:59"
                  />
                </el-form-item>
                <el-form-item label="消息类型">
                  <el-select v-model="query.messageType" clearable class="w-100" placeholder="请输入状态">
                    <el-option
                      v-for="(item,index) in messageTypes"
                      :key="index+'message_type'"
                      :value="item.code"
                      :label="item.codeName"
                    />
                  </el-select>
                </el-form-item>
                <el-button type="primary" @click="handleSelect">查询</el-button>
              </el-form>
            </div>
            <div class="table-panel">
              <el-table
                v-loading="tableLoading"
                class="grid-data-table"
                height="calc(100vh - 400px)"
                :data="tableData"
                @row-click="openDialog"
              >
                <el-table-column align="center" type="index" width="80" />
                <el-table-column prop="gmtCreate" label="接收时间" width="150">
                  <template slot-scope="scope">
                    <div>{{ parseTime(scope.row.gmtCreate, '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="messageType" label="消息类型" width="100">
                  <template slot-scope="scope">{{ getDictLabel('e025', scope.row.messageType) }}
                  </template>
                </el-table-column>
                <el-table-column prop="realName" label="发送人" width="100" />
                <el-table-column prop="content" label="发送类容" class-name="color-blue" />
              </el-table>
              <div class="pagination-container">
                <Pagination
                  v-show="query.total>0"
                  :total="query.total"
                  :page.sync="query.page"
                  :limit.sync="query.limit"
                  @pagination="initData"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getPage } from '@/api/base/message'
import { getDictLabel, parseTime } from '@/utils'
import { getDict } from '@/utils/dict'

export default {
  name: 'MessageFormDialog',
  components: {
    Pagination
  },
  props: {
    messageDialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableLoading: false,
      saveLoading: false,
      tableData: [],
      jumpPage: '/dashboard',
      query: {
        page: 1, limit: 10, total: 0,
        messageType: null, startTime: null, endTime: null
      },
      messageTypes: [],
      rules: {
        resourceType: [{ required: true, message: '请选择资源类型', trigger: 'change' }],
        resourceName: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.messageTypes = getDict('e025')
    this.initData()
  },
  methods: {
    getDictLabel, parseTime,
    initData() {
      const query = JSON.parse(JSON.stringify(this.query))
      this.tableLoading = true
      getPage(query).then(result => {
        this.tableLoading = false
        this.query.total = result.data.total
        this.tableData = result.data.list
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 查询
    handleSelect() {
      this.query.page = 1
      this.initData()
    },
    openDialog(row) {
      this.messageDialogVisible = false
      if (row.messageType === 'e025_01') {
        this.jumpPage = '/dashboard'
      } else if (row.messageType === 'e025_02') {
        this.jumpPage = '/dashboard'
      } else if (row.messageType === 'e025_03') {
        this.jumpPage = '/task/task'
      } else if (row.messageType === 'e025_04') {
        this.jumpPage = '/dashboard'
      } else if (row.messageType === 'e025_05') {
        this.jumpPage = '/dashboard'
      } else if (row.messageType === 'e025_06') {
        this.jumpPage = '/dashboard'
      }
      this.$router.push({ path: this.jumpPage })
    },
    closeDialog() {
      this.$emit('closeDialog')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
